<template>
  <view class="body">
    <view class="header">
      <view class="section left">
        <img class="text-img" src="https://img.js.design/assets/img/65d6f65fd6cf52f9c65da0f2.png#f3ad271a49f41c0e9ed9116caa85dc64" alt="">
      </view>
      <view class="section center">
        <text class="center-text">——超热话题——</text>
      </view>
      <view class="section right">
        <img class="text-img" src="https://img.js.design/assets/img/65d6f65fd6cf52f9c65da0f2.png#f3ad271a49f41c0e9ed9116caa85dc64" alt="">
      </view>
    </view>
    <view class="product">
      <text class="section">——##功能待上线 Common Soon ...##——</text>
      <text class="section">——##功能待上线 Common Soon ...题##——</text>
      <text class="section">——##功能待上线 Common Soon ...##——</text>
    </view>
  </view>
</template>


<script setup>

</script>

<style scoped lang="scss">
.body {
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  width: 94.5%;
  height: 160px;
  opacity: 1;
  box-shadow: 1px 1px 20px #fff9dc;
  margin-left: 0.8%;
  border-radius: 10px;
	background: linear-gradient(to left,#FAD048, #f6d878, #f5e3be);
  padding: 30rpx 2% 2%;

  .header {
    display: flex;
    justify-content: center; /* 改为居中以便更好的控制 */
    align-items: center;
    width: 100%; /* 确保header占满整个宽度 */

    .section {
      display: flex;
      align-items: center;
      justify-content: center; /* 默认居中对齐，对于特殊的section将在下面覆盖 */

      &.left {
        margin-top: 5px;
        margin-right: 15px;
        justify-content: flex-end; /* 左侧图片紧靠文本 */
        flex: 1; /* 确保占满剩余空间 */
      }

      &.right {
        margin-top: 5px;
        margin-left: 15px;
        justify-content: flex-start; /* 右侧图片紧靠文本 */
        flex: 1; /* 确保占满剩余空间 */
      }

      &.center {
        flex: 0; /* 确保文本部分不伸展 */
      }

      .text-img {
        width: 58px;
        height: 27.75px;
        opacity: 1;
      }

      .center-text {
        font-size: 20px;
        font-weight: 500;
        color: rgba(0, 0, 0, 1);
        white-space: nowrap; /* 阻止文字换行 */
      }
    }
  }

  .product {
    display: flex;
    margin-top: 20rpx; // 主推商品下面的间隔
    border-radius: 10px;
    overflow: hidden; // 保证子元素不超出边界
    flex-direction: column;

    .section {
      flex: 1;
      text-align: center;
      font-size: 30rpx;
      line-height: 60rpx;
      color: #000000; /* 超链接蓝色 */
      text-decoration: underline; /* 鼠标悬停时添加下划线 */
      margin-right: 20rpx;
    }
  }

}
</style>
